<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visible"
    :title="id ? '修改' : '新增'"
    @close="resetForm"
    width="40%"
  >
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="name" label="数据名称">
            <el-input v-model="formData.name" placeholder="请输入数据名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="openLevel" label="数据权限">
            <el-radio-group v-model="formData.openLevel">
              <el-radio label="1">私人</el-radio>
              <el-radio label="2">本角色</el-radio>
              <el-radio label="3">公开</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="openLevel" label="文件">
            <el-upload
              style="width: 100%"
              ref="uploadRef"
              class="upload-demo"
              accept=".xlsx"
              action=""
              :limit="1"
              :on-exceed="handleExceed"
              :http-request="handleUpload"
            >
              <el-button type="primary">点击上传</el-button>
              <template #tip>
                <div class="el-upload__tip">只能上传xlsx文件</div>
              </template>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :loading="submitBtnLoading" @click="handleCreate">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { genFileId } from 'element-plus'
import { myDataUpload } from '@/api/myData'
import { ElMessage } from 'element-plus'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref()
const submitBtnLoading = ref(false)
const formData = reactive({
  name: '',
  openLevel: '1'
})
const form = ref({})
const uploadRef = ref(null)
const formRules = reactive({
  name: [{ required: true, trigger: 'blur', message: '请输入数据名称！' }]
})
const resetForm = () => {
  formRef.value?.resetFields()
  emit('update:visible')
  delete formData.id
}
const handleUpload = function ({ file }) {
  form.value = new FormData()
  form.value.append('file', file)
}
const handleCreate = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // submitBtnLoading.value = true
      form.value.append('name', formData.name)
      form.value.append('openLevel', formData.openLevel)
      console.log(form.value)
      myDataUpload(form.value)
        .then((res) => {
          ElMessage.success('添加成功')
          emit('create')
          resetForm()
        })
        .finally(() => {
          submitBtnLoading.value = false
        })
    }
  })
}
const handleExceed = (files) => {
  uploadRef.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  uploadRef.value.handleStart(file)
}
</script>

<style lang="scss" scoped></style>
